<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" inline label-width="68px">
      <el-form-item label="选择系统" prop="systemId">
        <el-select
          v-model="queryParams.systemId"
          placeholder="请选择系统"
          style="width: 240px"
          @change="changeSystem"
        >
          <el-option v-for="i in systemList" :key="i.id" :label="i.name" :value="i.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="选择设备" prop="deviceId">
        <el-select
          v-model="queryParams.deviceId"
          placeholder="请先选择系统"
          style="width: 240px"
        >
          <el-option v-for="i in deviceList" :key="i.id" :label="i.name" :value="i.id" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          >导出</el-button
        >
      </el-form-item>
    </el-form>
    <el-row :gutter="24">
      <el-tabs v-model="queryParams.buildingId" @tab-click="handleQuery">
        <el-tab-pane
          v-for="item in buildList"
          :label="item.name"
          :name="item.id + ''"
          :key="item.id"
        />
      </el-tabs>
      <el-table
        :data="dataList"
        id="chartTableExpand"
        style="width: 100%"
        ref="chartTable"
        row-key="floorId"
        @expand-change="handleRowClick"
      >
        <el-table-column type="expand" label="展开/折叠" width="100">
          <template slot-scope="scope">
            <el-table
              :ref="'expandTable' + scope.row.id"
              :data="scope.row.children"
              v-loading="loading"
              border
            >
              <el-table-column type="index" width="100" label="序号" align="center" />
              <el-table-column label="设备名称" prop="deviceName" align="center" />
              <el-table-column label="已完成" prop="complete" align="center" />
              <el-table-column label="未完成" prop="total" align="center">
                <template slot-scope="scope">
                  {{ scope.row.total - scope.row.complete }}
                </template>
              </el-table-column>
              <el-table-column label="是否合格" prop="passStatus" align="center">
                <template slot-scope="scope">
                  {{ scope.row.passStatus == 2 ? "不合格" : "合格" }}
                </template>
              </el-table-column>
              <el-table-column
                label="一级消防注册工程师"
                prop="engineerName"
                align="center"
              />
              <el-table-column
                label="中级消防设施操作员"
                prop="operatorName"
                align="center"
              />
            </el-table>
            <pagination
              :total="getTotal(scope.row)"
              :page.sync="queryAll[scope.row.floorId].pageNum"
              :limit.sync="queryAll[scope.row.floorId].pageSize"
              @pagination="handlePagination(scope.row, $event)"
            />
          </template>
        </el-table-column>
        <el-table-column label="楼层" prop="floor" align="center" />
        <el-table-column label="系统" prop="systemName" align="center" />
        <el-table-column label="数量" prop="total" align="center" />
        <el-table-column label="已完成" prop="complete" align="center" />
        <el-table-column label="是否合格" prop="passStatus" align="center">
          <template slot-scope="scope">
            {{ scope.row.passStatus == 1 ? "合格" : "不合格" }}
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-row>
  </div>
</template>
<script>
import {
  getPlanTaskListQuery,
  getProjectPlanBuildingList,
  getBuildingPlanTaskList,
  exPortBuildingPlanTaskList,
  getDevicePlanTaskList,
} from "@/api/plan-produce/task";
import { blobValidate } from "@/utils/ruoyi";
export default {
  data() {
    return {
      loading: false,
      customerId: null, // 客户id
      systemList: [], // 系统列表
      deviceList: [], // 设备列表
      buildList: [], // 楼栋列表
      dataList: [], // 楼层列表
      queryParams: {
        subPlanId: null, // 任务id
        systemId: null, // 系统id
        deviceId: null, // 设备id
        buildingId: "", // 楼栋id
        pageNum: 1,
        pageSize: 10,
      },
      queryAll: {},
      totalAll: [],
      total: 0,
    };
  },
  mounted() {
    this.queryParams.subPlanId = this.$route.query.id;
    this.customerId = this.$route.query.customerId;
    this.getSystemList();
    this.getBuildingList();
  },
  methods: {
    // 获取楼层列表
    getList() {
      getBuildingPlanTaskList(this.queryParams).then((res) => {
        let list = res.rows;
        list.forEach((i) => {
          i.children = [];
        });
        this.dataList = list;
        this.total = res.total;
      });
    },
    // 获取楼栋列表
    getBuildingList() {
      getProjectPlanBuildingList(this.queryParams.subPlanId).then((res) => {
        if (res.data.length) {
          this.queryParams.buildingId = res.data[0].id + "";
          this.buildList = res.data;
          this.getList();
        }
      });
    },
    // 获取系统列表
    getSystemList() {
      getPlanTaskListQuery(this.queryParams.subPlanId).then((res) => {
        this.systemList = res.data;
      });
    },
    getTotal(row) {
      var Acc = 0;
      for (let i = 0; i < this.totalAll.length; i++) {
        if (this.totalAll[i].id == row.floorId) {
          Acc = this.totalAll[i].total - 0;
        }
      }
      return Acc;
    },
    handlePagination(row, event) {
      this.queryAll[row.floorId] = event;
      getDevicePlanTaskList({ ...row, ...event })
        .then((childrenData) => {
          row.children = childrenData.rows;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 点击展开
    handleRowClick(row, expandedRows) {
      if (expandedRows.length && !row.children.length) {
        this.loading = true;
        if (!this.queryAll[row.floorId]) {
          this.queryAll[row.floorId] = { pageNum: 1, pageSize: 10 };
        }
        getDevicePlanTaskList({ ...row, ...this.queryAll[row.floorId] })
          .then((childrenData) => {
            row.children = childrenData.rows;
            this.totalAll.push({
              total: childrenData.total,
              id: row.floorId,
            });
          })
          .finally(() => {
            this.loading = false;
          });
      } else {
        row.children = [];
      }
    },
    // 搜索按钮操作
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 重置按钮操作
    resetQuery() {
      this.queryParams.systemId = null;
      this.queryParams.deviceId = null;
      this.queryParams.pageNum = 1;
      this.deviceList = [];
      this.getList();
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "/manager/plan/plan/recordListDetails/export",
        {
          customerId: this.customerId,
        },
        `任务详情_${new Date().getTime()}.xlsx`
      );
    },
    // 切换系统
    changeSystem() {
      this.queryParams.deviceId = null;
      this.systemList.forEach((i) => {
        if (i.id == this.queryParams.systemId) {
          this.deviceList = i.children;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>
